
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        ul{list-style:none;}
        #box {
            height: 70px;
            width: 360px;
            padding-top: 360px;
            border:1px solid #ccc;
            margin:100px auto;
            overflow: hidden;
            background: url(img/鼠标展示/01big.jpg) no-repeat;
        }
        #box ul{
            overflow: hidden;
            border-top:1px solid #ccc;
        }
        #box li {
            float: left;
        }
    </style>
    <script>
        window.onload = function(){
            /*  一共有五组   这些有哪些相同的部分：
               鼠标经过   背景更换图片    我们可以吧这两个放到一个函数里面 重复使用就可以*/
            //事件源    li   事件  鼠标经过   事件处理程序   box 更换背景
            /*  var li02 = document.getElementById("li02");
              var box = document.getElementById("box");
              li02.onmouseover = function(){
                  box.style.backgroundImage = "url(images/02big.jpg)";
              }
              var li01 = document.getElementById("li01");
              var box = document.getElementById("box");
              li01.onmouseover = function(){
                  box.style.backgroundImage = "url(images/01big.jpg)";
              }*/
            var box = document.getElementById("box");
            function fn(liid,bg){  // 封装函数  参数的传递
                var obj = document.getElementById(liid);
                obj.onmouseover = function(){
                    box.style.backgroundImage = bg;
                }
            }
            fn("li01","url(img/鼠标展示/01big.jpg)"); // 实参  调用函数
            fn("li02","url(img/鼠标展示/02big.jpg)");
            fn("li03","url(img/鼠标展示/03big.jpg)");
            fn("li04","url(img/鼠标展示/04big.jpg)");
            fn("li05","url(img/鼠标展示/05big.jpg)");

        }
    </script>
</head>
<body>
<div id="box">
    <ul>
        <li id="li01"><img src="img/鼠标展示/01.jpg" alt=""/></li>
        <li id="li02"><img src="img/鼠标展示/02.jpg" alt=""/></li>
        <li id="li03"><img src="img/鼠标展示/03.jpg" alt=""/></li>
        <li id="li04"><img src="img/鼠标展示/04.jpg" alt=""/></li>
        <li id="li05"><img src="img/鼠标展示/05.jpg" alt=""/></li>
    </ul>
</div>
</body>
</html>